<div class="toolbar">
    <ts-datepicker [(ngModel)]="search.params.start" #datepickerOne="tsDatepicker" [color]="global.params.color">
    </ts-datepicker>
    <ts-datepicker [(ngModel)]="search.params.end" #datepickerTwo="tsDatepicker" [color]="global.params.color">
    </ts-datepicker>
</div>
<div class="p-3">
    <div class="card mb-3">
        <h5 class="card-header">帐户管理</h5>
        <div class="card-body">
            <div class="form-inline">
                <div class="input-group mb-3 mr-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-white">账号</span>
                    </div>
                    <input [(ngModel)]="search.params.account" style="width:140px" type="text" class="form-control"
                        placeholder="请输入账号关键词">
                    <div class="input-group-prepend input-group-append">
                        <span class="input-group-text bg-white">角色</span>
                    </div>
                    <ts-select style="width:190px;" [(ngModel)]="search.params.roleId" placeholder="请选择筛选的角色"
                        [items]="roleOptions"></ts-select>
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-white">注册时间</span>
                    </div>
                    <input tsToggle [value]="search.params.start||''" [target]="datepickerOne" [bind]="datepickerOne"
                        type="text" class="form-control bg-white pointer" placeholder="开始时间" style="width:140px"
                        readonly>
                    <div class="input-group-prepend input-group-append">
                        <span class="input-group-text bg-white">到</span>
                    </div>
                    <input tsToggle [value]="search.params.end||''" [target]="datepickerTwo" [bind]="datepickerTwo"
                        type="text" class="form-control bg-white pointer" placeholder="结束时间" style="width:140px"
                        readonly>
                </div>
            </div>
            <div class="form-inline">
                <div class="input-group mr-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-white">共查询到</span>
                    </div>
                    <input style="width:140px" type="text" value="{{page.total}}"
                        class="form-control text-center bg-white" readonly placeholder="0">
                    <div class="input-group-append">
                        <span class="input-group-text bg-white">条/结果</span>
                    </div>
                </div>
                <div class="m-btn">
                    <button (click)="showInfoModal()" class="btn btn-info">
                        <span>新增帐户</span>
                    </button>
                    <button (click)="doReset()" class="btn btn-white">
                        <i class="iconfont icon-refresh mr-1"></i>
                        <span>重置</span>
                    </button>
                    <button (click)="doSearch()" class="btn btn-white">
                        <i class="iconfont icon-search mr-1"></i>
                        <span>搜索</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <!-- 加载动画组件 -->
        <ts-table-load [display]="page.loading"></ts-table-load>
        <table class="table table-striped table-hover">
            <thead class="thead-light">
                <tr>
                    <th *ngFor="let th of theads" class="border-0">{{th}}</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of tableRows;index as i" class="mat-cell">
                    <td>{{page.offset+i+1}}</td>
                    <td>
                        <img tsImg [src]="item.avatar" dataSrc="assets/images/404.jpg" alt="avatar"
                            class="align-self-center mr-3 rounded-circle" height="40">
                    </td>
                    <td>{{item.account}}</td>
                    <td>{{getRoleName(item.roleId)}}</td>
                    <td>
                        <ts-switch [ngModel]="item.isActive" (ngModelChange)="changeActive(item,$event)"
                            [values]="{open:1,close:0}">
                            <!-- <span *ngIf="item.isActive===1" class="badge badge-success badge-pill">启用</span>
                            <span *ngIf="item.isActive===0" class="badge badge-secondary badge-pill">禁用</span> -->
                        </ts-switch>
                    </td>
                    <td>{{item.createdAt}}</td>
                    <td>
                        <span (click)="showInfoModal(item)" class="btn-icon btn-icon-info" tsTip="详情/编辑">
                            <i class="iconfont icon-edit"></i>
                        </span>
                        <span (click)="confirmDelete(item)" class="btn-icon btn-icon-danger" tsTip="删除">
                            <i class="iconfont icon-delete"></i>
                        </span>
                    </td>
                </tr>
                <tr class="mat-cell" *ngIf="tableRows.length<=0">
                    <td [attr.colspan]="theads.length" class="text-center text-info">
                        暂无数据～
                    </td>
                </tr>
                <tr class="bg-white">
                    <td [attr.colspan]="theads.length" class="text-right">
                        <ts-pagination outline (pageChange)="loadDatas()" [pagination]="page" goTitle="跳转">
                        </ts-pagination>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>